CSS 字体
阐述
通常在 font-family
属性中指定一系列不同的字体,并使浏览器依次选取可用的字体。字体栈的最后一个通常指定为类别,即 serif
, sans-serif
, monospace
和 cursive
中的一个。
字件分为本地字体和网络字体;网络字体需要在加载时下载以显示,可用的选项为
- Google font
- Vercel Fontsource
- 自己服务器上的字体,用 CSS 字体册的方式注册,并可以控制字体加载行为
实例
.title {
font-family: Lato, Futura, Helvetica, Arial, sans-serif;
}
近年来的趋势是使用「系统字体栈」,即选取各个系统上最好的默认字体,例如
html {
--font-sans-serif:
-apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui,
helvetica neue, helvetica, Ubuntu, roboto, noto, arial, sans-serif;
--font-serif:
Iowan Old Style, Apple Garamond, Baskerville, Times New Roman,
Droid Serif, Times, Source Serif Pro, serif, Apple Color Emoji,
Segoe UI Emoji, Segoe UI Symbol;
/* Set a global default */
font-family: var(--font-sans-serif);
}
字体册的实例:
@font-face {
font-family: 'Wotfard',
src: url('/fonts/wotfard-ragular.woff2') format('woff2');
font-weight: 400;
font-style: normal;
}